<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骑行，发现生活更美好</title>
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        #canpic {
            display: block;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        function computeSize() {
            var rate = ((document.documentElement.clientWidth || document.body.clientWidth) * 100) / 750;
            document.querySelector('html').style.fontSize = rate + 'px'
        }
        computeSize();
        window.addEventListener("resize", computeSize);
    </script>
</head>
<body>
<div id="wrapper">
    <div id="topBar">
        <a href="javascript:history.back(-1)">&lt;&nbsp;返回</a>
        <a href="#" id="ok">下一步</a>
    </div>
    <div id="img_box" class="five-ge" style="display: none;">
        <div class="pic">
            <img id="pic0" src="../images/1.png" data-id="0" />
            <img id="pic1" src="../images/2.png" data-id="1" />
        </div>
        <div class="pic">
            <img id="pic2" src="../images/3.png" data-id="2" />
            <img id="pic3" src="../images/4.png" data-id="3" />
            <img id="pic4" src="../images/5.png" data-id="4" />
        </div>

    </div>
    <div id="complete">
        <div id="five">
            <div class="pic">
                <canvas id="cv0" data-canvas="0"></canvas>
                <canvas id="cv1" data-canvas="1"></canvas>
            </div>
            <div class="pic">
                <canvas id="cv2" data-canvas="2"></canvas>
                <canvas id="cv3" data-canvas="3"></canvas>
                <canvas id="cv4" data-canvas="4"></canvas>
            </div>
        </div>
        <div class="com-foot">
            <img src="../images/nearby.png">
        </div>
    </div>

    <div id="filter">
        <div class="topper">
            <a href="#" class="cur">阳光</a>
            <a href="#">色彩</a>
            <a href="#">经典</a>
        </div>
        <div class="btm-box">
            <div class="swiper-container">
                <div id="down"  class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="0"  src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="1" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="2" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="3" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="4" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="5" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="6" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="7" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="8" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
            <div class="swiper-container">
                <div id="down"  class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="0"  src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="1" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="2" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="3" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="4" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="5" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="6" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="7" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="8" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
            <div class="swiper-container">
                <div id="down"  class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="0"  src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="1" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="2" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="3" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="4" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="5" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="6" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="7" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img class="sunshine0" data-class="8" src="../images/1.png" /><p>原图</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
    </div>
    <div id="camera">
        <img src="../images/camera.png">
        <input type="file" name="file_head" id="file_head" multiple onchange="javascript:setImagePreview();" />
    </div>

    <div id="can">

    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/html2canvas.min.js"></script>
<script src="../js/color.js"></script>
<script src="../js/commin.js"></script>

<!--<script src="../js/canvas5.js"></script>-->
<script src="../js/new5.js"></script>
<script src="../js/index.js"></script>
<script src="../js/gloomyflshfilter.js"></script>


<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        scrollbarDraggable: false,
        slidesPerView : 6,
        spaceBetween : 50,
        scrollbarSnapOnRelease : true
    });



    $(function(){
        var a=[];
        $("#file_head").on("change",function () {
            a.push(0);
            var l=a.length-1;
            var $file = $(this);
            var fileObj = $file[0];

            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#img_box img").eq(l);

            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });



</script>
</body>
</html>